<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .container {
            display: flex;
            flex-direction: column;
            /* 100vh表示整个页面的高度 视口高度的100% */
            height: 100vh;
        }

        .content {
            flex: 1;
            display: flex;
        }

        .content-left {
            background: blue;
            /* flex  第一个参数是放大因了了 第二个参数是缩小因子  第三个参数是flex-base */
            flex: 0 0 100px;
        }
        .content-mid {
            background: yellow;
            flex: 1;
        }
        .content-right {
            background: red;
            flex: 0 0 100px;
        }
    </style>
</head>

<body>
    <!-- header标签，section标签，footer标签是有语义化的div -->
    <div class="container">
        <header>
            头部
        </header>
        <section class="content">
            <div class="content-left">左左左左左左</div>
            <div class="content-mid">中中中中中中</div>
            <div class="content-right">右右右右右右</div>
        </section>
        <footer>
            底部
        </footer>
    </div>
</body>

</html>